<template>
  <div class="mvdetail">
		<!-- video -->
    <video :src="mvUrl" :poster="mvDetail.cover" autoplay controls></video>
		<!-- mv详情 -->
    <div class="mvInfo van-hairline--bottom">
      <h3>{{mvDetail.name}}</h3>
      <div class="singer_name">{{mvDetail.artistName}}</div>
      <div class="introduction">
        {{mvDetail.desc!==null ? mvDetail.desc:''}}
      </div>
    </div>
		<!-- 相似mv -->
    <div class="xiangsiMv">
      <h3>相似MV</h3>
      <ul>
        <li v-on:click="$router.push(`/mvDetail?id=${item.id}`)" class="van-hairline--bottom" v-for="(item) in xiangsiMvList" :key="item.id">
          <div class="xiangsiMv_c">
            <van-image width="100%" height="100%" :src="item.cover" />
          </div>
          <div class="xiangsiMv_i">
            <span>{{item.name}}</span>
            <span>{{item.artistName}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getMvUrl, getMvxiangqing, getXiangsiMv } from '../../../utils/api';
export default {
  data () {
    return {
			// mv播放地址
      mvUrl: '',
			// mv详细信息
      mvDetail: {},
			// 相似mv
      xiangsiMvList: []
    }
  },
  methods: {
		// 获取mv
    async getMvFn (id) {
			// 获取mv播放地址
      let result = await getMvUrl(id);
			// 获取mv详细信息
      let result2 = await getMvxiangqing(id);
			// 获取相似mv
      let result3 = await getXiangsiMv(id);
      if (result.code === 200 && result2.code === 200 && result3.code === 200) {
        this.mvUrl = result.data.url;
        this.mvDetail = result2.data;
        this.xiangsiMvList = result3.mvs;
      }
    }
  },
  mounted () {
    this.getMvFn(this.$route.query.id);
  }
}
</script>

<style lang="less" scoped>
@import '../../css/vars.less';
.mvdetail{
	background-color: @backWhite;
	padding-top: 100/50rem;
	padding-bottom: 20/50rem;
	margin-bottom: 120/50rem;
	video{
		width: 100%;
		height: 480/50rem;
	}
	.mvInfo{
		padding: 0 20/50rem 25/50rem;
		h3{
			margin: 0;
			font-size: 50/50rem;
			word-wrap: break-word;
			word-break: break-all;
		}
		.singer_name{
			color: #888;
			font-size: 30/50rem;
			margin-top: 10/50rem;
		}
		.introduction{
			width: 100%;
			word-wrap: break-word;
			word-break: break-all;
			margin-top: 20/50rem;
			font-size: 35/50rem;
		}
	}
	.xiangsiMv{
		margin-top: 40/50rem;
		h3{
			margin: 0;
			padding-left: 20/50rem;
			font-size: 38/50rem;
		}
		ul{
			margin-top: 10/50rem;
		}
		li{
			display: flex;
			padding: 25/50rem;
		}
		.xiangsiMv_c{
			width: 300/50rem;
			height: 200/50rem;
			overflow: hidden;
			border-radius: 20/50rem;
		}
		.xiangsiMv_i{
			width: 365/50rem;
			display: flex;
			flex-direction: column;
			margin-left: 30/50rem;
			span:nth-child(1){
				font-size: 35/50rem;
				word-wrap: break-word;
				word-break: break-all;
			}
			span:nth-child(2){
				color: #888;
				display: inline-block;
				margin-top: 10/50rem;
				word-wrap: break-word;
				word-break: break-all;
				font-size: 30/50rem;
			}
		}
	}
}
</style>